<template>
  <div class="w100">
    <el-select
      v-model="props.value"
      :multiple="props.multiple"
      :collapse-tags="props.collapseTags"
      :disabled="props.disabled"
      :clearable="props.clearable"
      :placeholder="props.placeholder || t('keys.pleaseSelect')"
      style="width: 100%"
      @change="change"
    >
      <el-option
        v-for="item in state.optionLists"
        :key="item.valueCode"
        :label="item.valueContent"
        :value="item.valueCode"
        @click="optionClick(item)"
      />
    </el-select>
  </div>
</template>
<script setup>
import { reactive, onMounted, nextTick, computed, unref } from 'vue'
import { getlovoptions } from 'api/common'
import { ERR_OK } from 'config/statusCode'
import { useI18n } from 'vue-i18n'
const { t } = useI18n() // 中英文
/* eslint-disable */
const emit = defineEmits()
const props = defineProps({
  value: [String, Array, Number],
  placeholder: {
    type: String,
    default: '请选择'
  },
  multiple: {
    // 是否支持多选 true支持
    type: Boolean,
    default: false
  },
  collapseTags: {
    // 多选以后输入框 全部展示选中值 还是叠加展示 +1 （false-展示全部选中，true-叠加展示）
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  clearable: {
    type: Boolean,
    default: true
  },
  lovCode: {
    // required: true,
    type: String
    // default: ''
  },
  tag: {
    type: String,
    default: ''
  }
})
const state = reactive({
  optionLists: []
})
// 获取下拉框的选择项数据
const getlovlist = async () => {
  let Params = {
    lovCode: unref(getProps).lovCode,
    tag: unref(getProps).tag
  }
  // 下拉框公共接口
  const { code, data } = await getlovoptions(Params)
  if (code === ERR_OK) {
    let optionLists = data || []
    state.optionLists = optionLists.sort(compare('valueOrder'))
  }
}
//  选择框change事件，将所选值和所选值所在的对象回传给父组件
const change = (val) => {
  emit('change', val)
}
const optionClick = (item) => {
  emit('optionClick', item)
}
const compare = (prop) => {
  return function(obj1, obj2) {
    var val1 = obj1[prop]
    var val2 = obj2[prop]
    if (val1 < val2) {
      return -1
    } else if (val1 > val2) {
      return 1
    } else {
      return 0
    }
  }
}
const getProps = computed(() => {
  return { ...props }
})

onMounted(() => {
  nextTick(() => {
    if (unref(getProps).lovCode) getlovlist()
  })
})
</script>
<style lang="scss" scoped>
.w100 {
  width: 100%;
}
</style>
